<template>
  <a-modal
    v-model:visible="showVisible"
    :title="showTitle"
    width="100%"
    @cancel="emits('update:restoreVisible', '')"
    wrapClassName="full-modal"
    :footer="null"
  >
    <concise-canvas
      :imgList="imgList"
      :prpopsStyle="{
        width: '100%',
        height: '100%',
        margin: '0 auto',
      }"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import ConciseCanvas from '/@/layouts/components/CanvasChart/canvasContainer.vue'
import { showPaper, showPaperDetail } from '/@/api/organization/examinationPaper'

const props = defineProps({
  restoreVisible: {
    type: String,
    default: '',
  },
  pyZycId: {
    type: String,
    default: '',
  },
  kmdm: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:restoreVisible'])

const showVisible = ref(false)
const showTitle = ref('答题卡还原')

const imgList = ref([])

const getImgList = async () => {
  imgList.value = []
  let requestData: any = {}
  if (props.restoreVisible == 'DTK') {
    showTitle.value = '答题卡还原'
    requestData = await showPaper({
      pyZycId: props.pyZycId,
    })
  } else if (props.restoreVisible == 'YJ') {
    showTitle.value = '试卷还原'
    requestData = await showPaperDetail({
      kmdm: props.kmdm,
    })
    requestData.data = requestData.data.map(item => {
      return {
        fpurl: item.tpurl,
        id: item.id,
        kmdm: item.kmdm,
      }
    })
  }
  const { code, data } = requestData

  if (code == 200) {
    imgList.value = data
  }
}

watch(
  () => props.restoreVisible,
  val => {
    if (val) {
      showVisible.value = true
      getImgList()
    } else {
      showVisible.value = false
    }
  },
  {
    immediate: true,
  }
)
</script>

<style lang="less">
.full-modal {
  padding: 0;
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
